<!DOCTYPE html>
<html lang = "zh-cmn-Hans" >
<head >
	<meta charset = "UTF-8" >
	<title >Title</title >
	<!-- 引入样式 -->
	<link rel="stylesheet" href="https://unpkg.com/vue-easytable/libs/theme-default/index.css" />
</head >
<body >
<div id="app">
	<ve-table :columns="columns" :table-data="tableData"></ve-table>
</div>
</body >
<!-- 引入 Vue -->
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<!-- 引入组件库 -->
<script src="https://unpkg.com/vue-easytable/libs/umd/index.js"></script>
<script>
	new Vue({
		el: "#app",
		data: function() {
			return {
				columns: [
					{ field: "name", key: "a", title: "Name", align: "center" },
					{ field: "date", key: "b", title: "Date", align: "left" },
					{ field: "hobby", key: "c", title: "Hobby", align: "right" },
					{ field: "address", key: "d", title: "Address" },
				],
				tableData: [
					{
						name: "John",
						date: "1900-05-20",
						hobby: "coding and coding repeat",
						address: "No.1 Century Avenue, Shanghai",
					},
					{
						name: "Dickerson",
						date: "1910-06-20",
						hobby: "coding and coding repeat",
						address: "No.1 Century Avenue, Beijing",
					},
					{
						name: "Larsen",
						date: "2000-07-20",
						hobby: "coding and coding repeat",
						address: "No.1 Century Avenue, Chongqing",
					},
					{
						name: "Geneva",
						date: "2010-08-20",
						hobby: "coding and coding repeat",
						address: "No.1 Century Avenue, Xiamen",
					},
					{
						name: "Jami",
						date: "2020-09-20",
						hobby: "coding and coding repeat",
						address: "No.1 Century Avenue, Shenzhen",
					},
				],
			};
		},
	});
</script>
</html >